<template>
	<view class="homeLayout pageBg">
		<!-- #ifndef !MP-WEIXIN -->
				<nav-bar title="首页"></nav-bar>
		<!-- #endif -->
		
		<!-- 轮播图区域 -->
		 <view class="banner-warp">
			 <image class="banner-bg" src="../../static/images/home/topimgbg.png" mode=""></image>
				<view class="my-swiper-warp">
					<up-swiper
						:list="swiperList"
						:autoplay="true"
						radius="15"
						bgColor="#ffffff"
					></up-swiper>
				</view>
			</view>
			
			<!-- 功能区域 -->
			<view class="nav-warp">
				<!-- pandian -->
				<view class="nav-title">  <image class="nav-img"  src="../../static/images/home/pandian.png" mode=""></image> 盘点登记</view>
				
				<view class="nav-list">
						<view class="nav-item" @click="goRouter()">
							<image class="nav-item-img" src="../../static/images/home/cangku.png"></image>
							<text class="nav-item-title">仓库预录入</text>
						</view>
						
						<view class="nav-item">
							<image class="nav-item-img" src="../../static/images/home/cangkuchaxun.png"></image>
							<text class="nav-item-title">仓库预查询</text>
						</view>
						
				</view>
			</view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
import {apiGetBanner,apiGetDayRandom,apiGetNotice,apiGetClassify} from "@/api/apis.js"
import { reactive } from 'vue';  
const swiperList = reactive(['/static/images/home/banner.png']);  

//跳转到仓库预录入页面
const goRouter = (id)=>{
	uni.navigateTo({
		url:"/pages/store/storeSearch"
	})	
}


</script>

<style lang="scss" scoped>
.banner-warp{
	width: 100%;
	height:450rpx; /* 设置高度为视口高度 */
	position: relative;
	.banner-bg{
		height: 100%;
		width: 100%;
		position: absolute;
	}
	.my-swiper-warp{
		width: 100%;
		box-sizing: border-box;
		padding-left: 2%;
		padding-right:2%;
		padding-top: 20rpx;
	}
	
}

.nav-warp{
	width: 96%;
	// background-color: #f4f4f4;
	// border: 1px solid #f;
	background-color: #fff;
	border-radius: 10px;
	height: 300rpx;
	margin-left: 2%;
	margin-top: -130rpx;
	position: relative;
	.nav-title{
		box-sizing: border-box;
		padding: 10rpx;
		font-weight: bold;
		color: #505558;
		font-size:35rpx;
		display: flex;
		align-items: center;
		.nav-img{
			width:60rpx;
			height:60rpx;
			margin-right: 10px;
		}
	}
	.nav-list{
		width: 100%;
		// height: 100px;
		display: flex;
		flex-wrap: wrap;
		padding-left: 10rpx;
		padding-right: 10rpx;
		// background-color: #f40;
		.nav-item{
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			// background-color: #f6f6f6;
			// border:1px solid #000;
			.nav-item-img{
				width:100rpx;
				height: 100rpx;
				margin-bottom: 10rpx;
			}
			.nav-item-title{
				font-size:24rpx;
				color: #666;
				font-weight: 600;
			}
		}
	}
}
</style>
